<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="搜索">
        <el-input v-model="formInline.user" @keyup.native.enter="onSubmit" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">用户列表</el-divider>
    <!-- 用户信息表格 @click="handleClick(scope.row)"-->
      <el-table :data="tableData.result" stripe style="width: 80%">
        <el-table-column prop="user_id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="user_name" label="姓名" >
        </el-table-column>
        <el-table-column prop="user_phone" label="电话" >
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">  
            <!-- 从一个页面携转参数跳转到另一页面：template.scope.row.id再配置路由路径时：path：user-update/:id -->
            <el-button  type="danger" size="small" @click="deleteUser(scope.row)" >删除</el-button>
            <el-button type="primary" size="small" @click="$router.push(`/home/user-update/${scope.row.user_id}`)">编辑</el-button>
            <!-- <el-button type="primary" size="small" @click="bianji(scope)">编辑1</el-button> -->

          </template>
        </el-table-column>
      </el-table>
   <!-- 分页器background -->
      <el-pagination
        :current-page="query.page"
        :page-sizes="[5,10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  </div>
</template>

<script>
import { getUserListAPI, delUserAPI, selectUserAPI } from '@/api'
export default {
  data() {
    return {
      keyWord:'',
      formInline: {
        user:'',
      },
      tableData:{
          result: []    
      },
      query: {
        page: 1,
        pagesize: 10
      },
      total: 0    
    }
  },
  mounted() {
    this.getUserData()
  },
  methods: {
    // scope 不知道的话可以先打印出来，看里面有什么再进行处理等
    // 获取用户列表
    async getUserData() {
      const res = await getUserListAPI(this.query)
      // console.log('用户列表：', res.data);
      this.tableData.result = res.data.data.result
      this.total = res.data.data.total
    },

    async onSubmit() {
      this.keyWord = this.formInline.user
      if ( this.formInline.user.trim()) {
        // console.log('查询参数：',this.formInline.user);
        const res = await selectUserAPI({uname:this.formInline.user})
        console.log('模糊查询', res);
        this.tableData.result = res.data.data
        this.total = res.data.data.length
      } else {
        // console.log('刷新');
        this.getUserData()
      }
    },
    deleteUser(data) {
      let params = {id: data.user_id}
      this.$confirm('确定删除用户？', '是否继续删除','提示',{type:'warning'}).then(async () => {
        const res = await delUserAPI(params)
        // console.log('删除用户', res);
        if(res.data.code === 200) {
          this.$message.success('删除用户成功！')
          this.getUserData()
        }
      }).catch(() => {})
    },
    // 分页查询 -- 
    //  用户输入关键字且点击确定按钮 -- 查询结果是带着对应的页数的 ,点击分页器会继续查询当页的内容;
    //  用户不输入关键字的话就查询所有 ; 所以要判断是否输入关键字 : keyword
    handleSizeChange(size) {
      // console.log('每页显示条数', size);
      this.query.pagesize = size
      this.getUserData()
    },
    handleCurrentChange(page) {
      // console.log('页数', page);
      this.query.page = page
      this.getUserData()
    }
  },
  
};
</script>

<style lang="scss" scoped>

</style>